Update docs and improve/normalize components props (#309)

* Update columns docs

* add Block component

* fix tests

* more docs

* add more components to the docs

* added all elements

* Add missing links to bulma.io documentation

* [WIP] use Element.proptypes and defaultProps instead of modifier

* update can i use

* use Element proptypes ans defaultprops

* breadcrumb component

* add card

* refactor dropdow to stop using class component

* dropdown docs

* Menu component

* Enable classProperties in babel

* Fix storybook webpack issue

* Add level doc

* Message docs

* Fix render as a color constants

* add bulma docs link to message story

* update modal component

* update snapshots

* remove modifier dependency

* remove modifiers folder

* if button type its reset or submit force renderAs button

* remove modifiers import from d.ts files

* finish Element docs (for now)

* normalize normalize position (center -> centered)

* docs improvements

* delete documentation folder

* more default props

* fixes

* update reponsive text alignment

* Rename textAlignment to textAlign

* even more...

* refactor pagination to functional component

* remove babel plugin not need it anymore

* update dependencies

* add pagination docs

* Panel docs

* tabs docs

* dome Form component docs

* Fix input tests

* Texta area and tests

* Select docs

* Checkbox

* Radio docs

* Add label story

* Passdown size prop from Field to childrens

* update test and lower coverage (for now)

* Finish form docs

* remove unused files

* - Container Docs
- Remove Fluid from container
- Add fluid as a possible value of breakpoint
- Add Max prop to container

* Level docs

* rename position to align

* update Changelog

* remove Media.Content component (duplicates Content Component)

* Hero

* Add Section docs

* Update Footer docs

* add Tile docs

* remove notification and color props from Tile

* improve Tile docs

* Improve responsive gap prop

* remove unused mock

Co-authored-by: Kenneth <[email protected]>

.eslintrc

@@ -50,6 +50,9 @@
     "react/forbid-foreign-prop-types": 0,
     "jsx-a11y/anchor-is-valid": 0,
     "react/destructuring-assignment": 0,
-    "jsx-a11y/label-has-associated-control": 0
+    "jsx-a11y/label-has-associated-control": 0,
+    "react/require-default-props": 0,
+    "react/default-props-match-prop-types": 0,
+    "react/prop-types": 0
   }
 }

.storybook/common-props.js

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { ArgsTable } from '@storybook/addon-docs/blocks';
+import { Element, Block, Message, Button } from '../'
+
+const CommonProps = () => {
+  const [show, setShow] = useState()
+  return (
+    <>
+      <Block>
+        <Message color="info">
+          <Message.Body textSize={7}>
+            This component also has all the shared props from the <code>Element</code> component {' '}
+            <a onClick={() => setShow(s => !s)}>{show ? 'Hide' : 'Show'} common props</a>
+          </Message.Body>
+        </Message>
+        {
+          show && <ArgsTable of={Element}  />
+        }
+      </Block>
+    </>
+  )
+};
+
+export default CommonProps

.storybook/main.js

@@ -13,15 +13,15 @@ module.exports = {
         },
       },
     },
-    '@storybook/addon-actions',
     '@storybook/addon-knobs',
     '@storybook/addon-links',
     '@storybook/addon-events',
-    '@storybook/addon-a11y',
     '@storybook/addon-viewport',
+    '@storybook/addon-postcss',
     'storybook-addon-react-docgen',
   ],
   webpackFinal: (config) => {
+    config.devtool = 'source-maps';
     config.resolve.modules.push('node_modules', 'src');
     config.resolve.alias['react-bulma-components/lib'] = path.resolve(
       __dirname,

.storybook/preview.js

@@ -1,16 +1,61 @@
 import { addDecorator } from '@storybook/react';
 import { withPropsTable } from 'storybook-addon-react-docgen';
+import { MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
 
 import 'bulma/css/bulma.min.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
+import './rewrites.css'
 
 addDecorator(withPropsTable);
 
+console.log(JSON.stringify(MINIMAL_VIEWPORTS, null, 2))
+
 export const parameters = {
   layout: 'padded',
+  viewMode: 'docs',
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      "tablet": {
+        "name": "Tablet",
+        "styles": {
+          "width": "1023px",
+          "height": "963px"
+        },
+        "type": "tablet"
+      },
+      "desktop": {
+        "name": "Desktop",
+        "styles": {
+          "width": "1215px",
+          "height": "100%"
+        },
+        "type": "desktop"
+      },
+      "widescreen": {
+        "name": "Widescreen",
+        "styles": {
+          "width": "1407px",
+          "height": "100%"
+        },
+        "type": "desktop"
+      },
+      "fullhd": {
+        "name": "Fullhd",
+        "styles": {
+          "width": "1920px",
+          "height": "100%"
+        },
+        "type": "desktop"
+      },
+    }
+  },
   options: {
     storySort: {
-      order: ['Basics', 'Elements', 'Layout', 'Components', 'Form'],
+      order: ['Welcome', 'Core Component', 'Columns', 'Elements', 'Components', 'Form', 'Layout'],
     },
   },
+  previewTabs: {
+    'storybook/docs/panel': { index: 0, default: true },
+  }
 };

.storybook/rewrites.css

@@ -0,0 +1,29 @@
+
+pre code {
+  color: currentColor;
+}
+
+pre code .tag.token {
+  background-color: unset;
+  border-radius: unset;
+  display: unset;
+  font-size: 1em;
+  height: unset;
+  padding-left: unset;
+  padding-right: unset;
+  white-space: unset;
+}
+pre code .number.token {
+  margin-right: unset;
+}
+
+pre code .plain-text {
+  color: #da1039;
+}
+
+pre code .number{
+  padding: unset;
+  min-width: unset;
+  font-size: unset;
+  height: unset;
+}

CHANGELOG.md

@@ -2,20 +2,105 @@
 
 ## 4.0.0
 
-- Bump Bulma version to `0.9.0`
-
+- Bump Bulma version to `0.9.2`
+  - Improves TS support
   - `<List />` component is completely removed.
-
   - New spacing modifiers. They have the same names as their equivalent Bulma class names.
     Refer to the [official documentation](https://bulma.io/documentation/helpers/spacing-helpers/) for more information.
-
     - Usage: `pt-0` in Bulma is equivalent to `pt={0}` in props. Applies to all spacing modifiers.
-
-  - `src/index.sass` now imports both `~/bulma/sass/helpers/_all` and `~/bulma/bulma`,
-    because `~/bulma/base/_all` is deprecated.
-
-  - For changelog of Bulma `0.9.0`, see [here](https://github.com/jgthms/bulma/releases/tag/0.9.0)
+  - Added srOnly prop to all components to display only on **screen readers**
+  - Add Support to textSize `7`
+- Improve responsive helper props (`mobile`, `tablet`, `desktop`, `widescreen`, `fullhd`, `touch`, `untilWidescreen`, `untilFullhd`)
+  - `hidden` is now inside `display` prop, `{ hidden: true }` become `{ display: 'hidden' }`
+  - Added `invisible` to responsive props
+- New Storybook, with more details (and hopefully more helpful)
+- Renamed the prop value `centered` to `center` on all components to use the same everywhere
+
+### Breadcrumb
+- Removed `items` props in favor of composition with `Breadcrumb.Item`
+- Added new component `Breadcrumb.Item`
+
+### Botton.Group
+- Deprecated `gapless` to `hasAddons` in `Button.Group`
+- Renamed `position` prop to `align`
+
+### Columns
+- Remove `gapless` prop
+- Add variable `gap` prop
+- Add gap to responsive option
+
+### Columns.Column
+- Merge common responsive props with `Column` responsive props
+
+### Container
+- Removed `fluid` prop in favor to add it as an option of the `breakpoint` prop
+- Added `max` prop to allow use `is-max-desktop` and `is-max-widescreen` from bulma
+
+### Dropdown
+- Dropdown component now accept an `icon` prop that will accept the the component to render the icon
+- Removed deprecated `align` prop in favor of boolean `right` prop
+
+### Form.Control
+- Removed size props (did nothing)
+- Automatically add has-icon-left/right if an `Icon` with align is on the children
+
+### Footer
+- Update default `renderAs` to `footer`
+
+### Form.Field
+- Added `size` prop that will be also used on childrens that accept size as a prop `Input`, `InputFile`, `Label`, `Icon`, `Button`...
+
+### Form.Input
+- Removed `hovered` and `focused` prop in favor to a `state` props that accept `hover` or `focus` as value
+
+### Form.InputFile
+- Removed `centered` and `right` prop in favor to a `align` props that accept `center` or `right` as value
+
+### Form.Label
+- Added `size` prop that will be used on components inside the `Field`, like `Input`, `Select`, `Label`...
+
+### Form.Select
+- Removed `hovered` and `focused` prop in favor to a `state` props that accept `hover` or `focus` as value
+
+### Form.Textarea
+- Removed `hovered` and `focused` prop in favor to a `state` props that accept `hover` or `focus` as value
+
+## Hero.Head
+- Renamed to `Hero.Header`
+
+### Icon
+- Removed the `icon` prop from the `Icon` component.
+
+### Level
+- Update default `renderAs` from `div` to `nav`
+
+### Media.Content
+- Removed the whole component, use `Content` component insted
+
+### Media.Item
+- Renamed `position` prop to `align`
+
+### Modal
+- Renamed `Modal.Card.Head` to `Modal.Card.Header`
+- Renamed `Modal.Card.Foot` to `Modal.Card.Footer`
+- Close button on the top-right corner will be displayed always if the showClose prop is passed, (Before if the children was a card was not displayed)
+- Only need to pass `onClose` prop to `Modal` component, no need to pass if to any `Modal.*` any more
+
+### Navbar.Item
+- Removed dropdown prop, it will be added automatically if a Navbar.Dropdown is detected on the childrens.
+
+### Navbar.Container
+- Renamed `position` prop to `align`
+
+### Pagination
+- Renamed `position` prop to `align`
+
+### Table
+- Add `hoverable` prop
 
+### Tile
+- Remove `notification` prop. You can use `renderAs={Notification}` if need it
+- Remove `color` prop.
 
 ## 3.3.0
 

README.md

@@ -6,14 +6,7 @@
 [![Release Version](https://img.shields.io/github/release/couds/react-bulma-components.svg)](https://github.com/couds/react-bulma-components)
 [![Npm Downloads](https://img.shields.io/npm/dm/react-bulma-components.svg)](https://www.npmjs.com/package/react-bulma-components)
 
-React components for [Bulma](http://bulma.io/) (v0.9.1) UI compatible with most used React Frameworks ([Gatsby](https://www.gatsbyjs.org/), [CRA](https://github.com/facebook/create-react-app), [Next.js](https://nextjs.org/))
-
-## BREAKING CHANGES V3 -> V4:
-
-- We Remove all the styles from this library, now you need to install and use the [bulma.io](https://bulma.io) package directly
-- Removed included icons
-- Dropdown component now accept an `icon` prop that will accept the the component to render the icon
-- Removed the `icon` prop from the `Icon` component.
+React components for [Bulma](http://bulma.io/) (v0.9.2) UI compatible with most used React Frameworks ([Gatsby](https://www.gatsbyjs.org/), [CRA](https://github.com/facebook/create-react-app), [Next.js](https://nextjs.org/))
 
 
 ## To Install

babel.config.js

@@ -10,9 +10,5 @@ module.exports = (api) => {
       '@babel/preset-react',
       ['@babel/preset-env', { modules: isTestEnv ? 'commonjs' : false }],
     ],
-    plugins: [
-      '@babel/plugin-proposal-class-properties',
-      '@babel/plugin-proposal-object-rest-spread',
-    ],
   };
 };