Merge pull request #34 from jeslage/beta

Update storybook packages to also support react 18

.eslintrc

@@ -21,6 +21,7 @@
  },
  "rules": {
  "no-empty-function": "off",
+ "@typescript-eslint/ban-ts-comment": "off",
  "@typescript-eslint/ban-ts-ignore": "off",
  "@typescript-eslint/no-empty-function": "off",
  "@typescript-eslint/no-unused-vars": "error",

.github/workflows/release.yml

@@ -0,0 +1,25 @@
+name: Release
+
+on:
+ workflow_dispatch:
+
+jobs:
+ release:
+ permissions:
+ contents: write # to be able to publish a GitHub release
+ issues: write # to be able to comment on released issues
+ pull-requests: write # to be able to comment on released pull requests
+ id-token: write # to enable use of OIDC for npm provenance
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v2
+ with:
+ node-version: 18
+ - run: npm ci --legacy-peer-deps
+ - run: npm audit signatures
+ - run: npm run build
+ - run: npx semantic-release
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.releaserc.json

@@ -0,0 +1,16 @@
+{
+ "branches": ["main"],
+ "plugins": [
+ "@semantic-release/commit-analyzer",
+ "@semantic-release/release-notes-generator",
+ "@semantic-release/changelog",
+ "@semantic-release/npm",
+ [
+ "@semantic-release/git",
+ {
+ "assets": ["package.json", "package-lock.json", "CHANGELOG.md"],
+ "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+ }
+ ]
+ ]
+}

README.md

@@ -6,7 +6,6 @@
 
 ![Screenshot](./assets/screenshot.jpg)
 [🌍 Example](https://storybook-addon-theme-playground.now.sh)
-[📖 Migration](#migration)
 
 ## Features
 
@@ -22,7 +21,6 @@
 - [Control components](#Control-components)
 - [Default controls](#default-controls)
 - [Typescript](#typescript)
-- [Migration](#migration)
 
 ## Installation
 
@@ -338,14 +336,10 @@ const controls = {
 
 > `number`
 
-### `Input`
+### `Text`
 
 > `string`
 
-### `Textarea`
-
-> `string` && `string.length >= 40`
-
 ### `Range`
 
 > `string` && `string.endsWith("px" || "rem" || "em" || "%")`
@@ -395,120 +389,3 @@ const params: ThemePlaygroundParams = {
 
 export const parameters = { themePlayground: params };
 ```
-
-## Migration
-
-### Storybook Version
-
-`storybook-addon-theme-playground` needs at least Storybook 6, because it uses some of the internal control components which came with the v6 release. If you need to support a smaller version of Storybook, please try to install the addon version `1.3.4`. [Or read about how to migrate to Storybook 6](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5).
-
-```sh
-# For Storybook versions < 6.0
-npm install -D [email protected]
-yarn add -D [email protected]
-```
-
-### Addon version 2 migration
-
-If you want to migrate the addon to version 2 follow these steps.
-
-**1. Change the addons import inside `main.js`**
-
-```js
-// Before
-module.exports = {
- addons: ['storybook-addon-theme-playground/dist/register']
-};
-
-// After
-module.exports = {
- addons: ['storybook-addon-theme-playground']
-};
-```
-
-**2. Change from decorators to parameters inside `preview.js`**
-
-```js
-// Before
-import { ThemeProvider } from 'styled-components';
-import { withThemePlayground } from 'storybook-addon-theme-playground';
-
-import theme from 'path/to/theme';
-
-export const decorators = [
- withThemePlayground({
- theme,
- provider: ThemeProvider
- })
-];
-
-// After
-import { ThemeProvider } from 'styled-components';
-
-import theme from 'path/to/theme';
-
-export const parameters = {
- themePlayground: {
- theme,
- provider: ThemeProvider
- }
-};
-```
-
-**3. Change key from overrides to controls inside configuration**
-
-The overrides key was replaced by the controls key, if you customized the panel components rename the configuration key.
-
-```js
-// Before
-const options = {
- theme,
- provider: ThemeProvider,
- overrides: {
- // Your customized controls
- }
-};
-
-// After
-const options = {
- theme,
- provider: ThemeProvider,
- controls: {
- // Your customized controls
- }
-};
-```
-
-**4. Change deprecated control type colorpicker and counter**
-
-If you used the deprecated control type counter or colorpicker, replace it by number or color.
-
-```js
-// Before
-const options = {
- theme,
- provider: ThemeProvider,
- overrides: {
- 'button.spacing': {
- type: 'counter'
- },
- 'button.color': {
- type: 'colorpicker'
- }
- }
-};
-
-// After
-const options = {
- theme,
- provider: ThemeProvider,
- overrides: {
- 'button.spacing': {
- type: 'number'
- },
- 'button.color': {
- type: 'color'
- }
- }
-};
-```

example/.babelrc.json

@@ -0,0 +1,16 @@
+{
+ "sourceType": "unambiguous",
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "targets": {
+ "chrome": 100
+ }
+ }
+ ],
+ "@babel/preset-react",
+ "@babel/preset-typescript"
+ ],
+ "plugins": []
+}