Dev chromatic (#931)

.github/workflows/chromatic.yml

+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm i
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
\ No newline at end of file

.storybook/main.js

+module.exports = {
+	"stories": [
+		"../src/**/*.stories.mdx",
+		"../src/**/*.stories.@(js|jsx|ts|tsx)"
+	],
+	"addons": [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials"
+	]
+}
\ No newline at end of file

.storybook/preview.js

+import '../dist/css/tabler.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}
\ No newline at end of file

README.md

@@ -148,6 +148,12 @@ Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/
 
 <a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>
 
+## Thanks
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
+
 ## License
 
 See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.

package.json

@@ -11,7 +11,10 @@
     "release": "release-it",
     "svg-icons": "gulp svg-icons",
     "percy": "gulp build && npx percy snapshot demo",
-    "bundlewatch": "bundlewatch --config .bundlewatch.config.json"
+    "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
+    "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -58,9 +61,13 @@
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/stream": "^2.0.0",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/html": "^6.3.12",
     "autoprefixer": "^10.3.7",
     "browser-sync": "^2.27.5",
     "bundlewatch": "^0.3.2",
+    "chromatic": "^6.0.5",
     "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
     "gulp": "^4.0.2",
@@ -96,6 +103,7 @@
     "imask": "^6.2.2",
     "litepicker": "^2.0.11",
     "nouislider": "^15.5.0",
+    "storybook-addon-outline": "^1.4.1",
     "tom-select": "^1.7.8"
   },
   "resolutions": {

src/stories/Button.stories.js

+export default {
+  title: 'Example/Button',
+};
+
+const Template = ({ label, ...args }) => {
+  return `<button class="btn">${label}</button>`;
+};
+
+export const Primary = () => `<button class="btn btn-primary">Primary button</button>`;
+
+export const Secondary = () => `<button class="btn">Secondary button</button>`;
+
+export const Danger = () => `<button class="btn btn-danger">Danger button</button>`;
+
+export const Large = () => `<button class="btn btn-lg">Large button</button>`;
+
+export const Small = () => `<button class="btn btn-sm">Small button</button>`;
\ No newline at end of file