diff --git a/.babelrc.json b/.babelrc.json index f756c6f..d5ab050 100644 --- a/.babelrc.json +++ b/.babelrc.json @@ -12,4 +12,4 @@ "@babel/preset-react" ], "plugins": [] -} \ No newline at end of file +} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..590a405 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +.devcontainer +.github +node_modules +.cache \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..544138b --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/.storybook/main.js b/.storybook/main.js index 2ca80c5..2321ead 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,13 +1,10 @@ /** @type { import('@storybook/react-webpack5').StorybookConfig } */ const config = { - stories: [ - "../src/**/*.mdx", - "../src/**/*.stories.@(js|jsx|ts|tsx)" - ], + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-interactions", + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', '@storybook/addon-links', '../addons/addon-html/src', { @@ -18,11 +15,11 @@ const config = { }, ], framework: { - name: "@storybook/react-webpack5", + name: '@storybook/react-webpack5', options: {}, }, docs: { - autodocs: "tag", + autodocs: 'tag', }, }; export default config; diff --git a/.storybook/manager.js b/.storybook/manager.js index 66ce381..2e62084 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -2,5 +2,5 @@ import { addons } from '@storybook/manager-api'; import theme from './theme'; addons.setConfig({ - theme -}); \ No newline at end of file + theme, +}); diff --git a/.storybook/preview.js b/.storybook/preview.js index 28212a2..c63c617 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,10 +1,9 @@ - import '../src/css/tailwind.css'; export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, + actions: { argTypesRegex: '^on[A-Z].*' }, controls: { - matchers: { + matchers: { color: /(background|color)$/i, date: /Date$/, }, @@ -21,7 +20,7 @@ export const parameters = { }, options: { storySort: { - order: ['Core',['Overview', 'Colours','Layout',],'Components'], + order: ['Core', ['Overview', 'Colours', 'Layout'], 'Components'], }, }, -} \ No newline at end of file +}; diff --git a/.storybook/theme.js b/.storybook/theme.js index 2a0d46c..97fd192 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -4,7 +4,8 @@ export default create({ base: 'light', brandTitle: 'iugu UX', brandUrl: '', - brandImage: 'https://s3-sa-east-1.amazonaws.com/prod-jobsite-files.kenoby.com/uploads/desativado-1617737004-logo-iugu-4-devs-novopng.png', + brandImage: + 'https://s3-sa-east-1.amazonaws.com/prod-jobsite-files.kenoby.com/uploads/desativado-1617737004-logo-iugu-4-devs-novopng.png', brandTarget: '_self', // UI @@ -28,6 +29,5 @@ export default create({ inputBg: '#FFFFFF', inputBorder: '#CBCBCA', inputTextColor: '#333', - inputBorderRadius: 4 - -}); \ No newline at end of file + inputBorderRadius: 4, +}); diff --git a/addons/addon-html/src/components/Panel.jsx b/addons/addon-html/src/components/Panel.jsx index 07fa794..2d69ec7 100644 --- a/addons/addon-html/src/components/Panel.jsx +++ b/addons/addon-html/src/components/Panel.jsx @@ -1,10 +1,10 @@ -import React, { useMemo } from "react"; -import { useAddonState, useChannel, useParameter } from "@storybook/api"; -import { AddonPanel } from "@storybook/components"; -import { ADDON_ID, EVENTS, PARAM_KEY } from '../constants' -import { format as prettierFormat } from "prettier/standalone"; -import prettierHtml from "prettier/parser-html"; -import { PanelContent } from "./PanelContent"; +import React, { useMemo } from 'react'; +import { useAddonState, useChannel, useParameter } from '@storybook/api'; +import { AddonPanel } from '@storybook/components'; +import { ADDON_ID, EVENTS, PARAM_KEY } from '../constants'; +import { format as prettierFormat } from 'prettier/standalone'; +import prettierHtml from 'prettier/parser-html'; +import { PanelContent } from './PanelContent'; export const Panel = (props) => { // https://storybook.js.org/docs/react/addons/addons-api#useaddonstate @@ -25,16 +25,16 @@ export const Panel = (props) => { } = parameters; const prettierConfig = { - htmlWhitespaceSensitivity: "ignore", + htmlWhitespaceSensitivity: 'ignore', ...prettier, // Ensure we always pick the html parser - parser: "html", + parser: 'html', plugins: [prettierHtml], }; const formattedCode = useMemo( () => code && prettierFormat(code, prettierConfig), - [code, prettierConfig], + [code, prettierConfig] ); return ( @@ -46,4 +46,4 @@ export const Panel = (props) => { /> ); -}; \ No newline at end of file +}; diff --git a/addons/addon-html/src/components/PanelContent.jsx b/addons/addon-html/src/components/PanelContent.jsx index 5f4a00e..4174e2c 100644 --- a/addons/addon-html/src/components/PanelContent.jsx +++ b/addons/addon-html/src/components/PanelContent.jsx @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react'; -import style from "react-syntax-highlighter/dist/esm/styles/hljs/github"; -import SyntaxHighlighter from "./SyntaxHighligher"; +import style from 'react-syntax-highlighter/dist/esm/styles/hljs/github'; +import SyntaxHighlighter from './SyntaxHighligher'; /** * Checkout https://github.com/storybookjs/storybook/blob/next/code/addons/jest/src/components/Panel.tsx @@ -10,14 +10,14 @@ import SyntaxHighlighter from "./SyntaxHighligher"; export const PanelContent = ({ code, showLineNumbers, wrapLines }) => { return ( - {code} - - ) -} + language={'xml'} + copyable={true} + padded={true} + style={style} + showLineNumbers={showLineNumbers} + wrapLines={wrapLines} + > + {code} + + ); +}; diff --git a/addons/addon-html/src/components/SyntaxHighligher.jsx b/addons/addon-html/src/components/SyntaxHighligher.jsx index 5ce0ef0..94990d7 100644 --- a/addons/addon-html/src/components/SyntaxHighligher.jsx +++ b/addons/addon-html/src/components/SyntaxHighligher.jsx @@ -1,16 +1,16 @@ -import React, { useState } from "react"; -import { styled } from "@storybook/theming"; +import React, { useState } from 'react'; +import { styled } from '@storybook/theming'; -import { ActionBar, ScrollArea } from "@storybook/components"; +import { ActionBar, ScrollArea } from '@storybook/components'; -import ReactSyntaxHighlighter from "react-syntax-highlighter"; +import ReactSyntaxHighlighter from 'react-syntax-highlighter'; const Pre = styled.pre(({ theme, padded }) => ({ - display: "flex !important", - justifyContent: "flex-start", + display: 'flex !important', + justifyContent: 'flex-start', margin: 0, padding: padded ? `${theme.layoutMargin}px !important` : 0, - tabSize: "2", + tabSize: '2', })); const Code = styled.code` @@ -35,7 +35,7 @@ const Code = styled.code` `; export default function SyntaxHighlighter({ - language = "jsx", + language = 'jsx', copyable = false, bordered = false, padded = false, @@ -69,7 +69,7 @@ export default function SyntaxHighlighter({ CodeTag={Code} showLineNumbers={showLineNumbers} wrapLines={wrapLines} - lineProps={{ className: "code-line" }} + lineProps={{ className: 'code-line' }} {...rest} > {children.trim()} @@ -77,9 +77,9 @@ export default function SyntaxHighlighter({ {copyable && ( )} ); -} \ No newline at end of file +} diff --git a/addons/addon-html/src/constants.js b/addons/addon-html/src/constants.js index 010597c..9072803 100644 --- a/addons/addon-html/src/constants.js +++ b/addons/addon-html/src/constants.js @@ -1,6 +1,6 @@ -export const ADDON_ID = "storybook/html"; +export const ADDON_ID = 'storybook/html'; export const PANEL_ID = `${ADDON_ID}/panel`; export const PARAM_KEY = `html`; export const EVENTS = { CODE_UPDATE: `${ADDON_ID}/codeUpdate`, -}; \ No newline at end of file +}; diff --git a/addons/addon-html/src/index.js b/addons/addon-html/src/index.js index 4ea1c2f..56a9656 100644 --- a/addons/addon-html/src/index.js +++ b/addons/addon-html/src/index.js @@ -1,5 +1,5 @@ if (module && module.hot && module.hot.decline) { - module.hot.decline(); - } // make it work with --isolatedModules - - export default {}; \ No newline at end of file + module.hot.decline(); +} // make it work with --isolatedModules + +export default {}; diff --git a/addons/addon-html/src/manager.js b/addons/addon-html/src/manager.js index 83bd6c4..72f84f2 100644 --- a/addons/addon-html/src/manager.js +++ b/addons/addon-html/src/manager.js @@ -1,5 +1,3 @@ - - import { addons, types } from '@storybook/manager-api'; import { Panel } from './components/Panel'; import { ADDON_ID, PANEL_ID } from './constants'; @@ -8,7 +6,7 @@ addons.register(ADDON_ID, () => { addons.add(PANEL_ID, { title: 'Html', type: types.PANEL, - match: ({ viewMode }) => viewMode === "story", - render: Panel + match: ({ viewMode }) => viewMode === 'story', + render: Panel, }); -}); \ No newline at end of file +}); diff --git a/addons/addon-html/src/preset.js b/addons/addon-html/src/preset.js index 6637756..2512abd 100644 --- a/addons/addon-html/src/preset.js +++ b/addons/addon-html/src/preset.js @@ -1,14 +1,14 @@ // /my-addon/src/preset.js function config(entry = []) { - return [...entry, require.resolve("./preview")]; + return [...entry, require.resolve('./preview')]; } function managerEntries(entry = []) { - return [...entry, require.resolve("./manager")]; + return [...entry, require.resolve('./manager')]; } module.exports = { managerEntries, config, -}; \ No newline at end of file +}; diff --git a/addons/addon-html/src/preview.js b/addons/addon-html/src/preview.js index 10f16ca..6489cee 100644 --- a/addons/addon-html/src/preview.js +++ b/addons/addon-html/src/preview.js @@ -1,2 +1,2 @@ -import { withHTML } from "./withHTML"; -export const decorators = [withHTML]; \ No newline at end of file +import { withHTML } from './withHTML'; +export const decorators = [withHTML]; diff --git a/addons/addon-html/src/withHTML.js b/addons/addon-html/src/withHTML.js index 3697ef4..39ae464 100644 --- a/addons/addon-html/src/withHTML.js +++ b/addons/addon-html/src/withHTML.js @@ -1,32 +1,31 @@ -import { makeDecorator, useChannel } from "@storybook/addons"; -import { EVENTS } from "./constants"; +import { makeDecorator, useChannel } from '@storybook/addons'; +import { EVENTS } from './constants'; - -console.log('with html loading...') +console.log('with html loading...'); export const withHTML = makeDecorator({ - name: "withHTML", - parameterName: "html", + name: 'withHTML', + parameterName: 'html', skipIfNoParametersOrOptions: false, wrapper: (storyFn, context, { parameters = {} }) => { const emit = useChannel({}); setTimeout(() => { - const rootSelector = parameters.root || "#storybook-root, #root"; + const rootSelector = parameters.root || '#storybook-root, #root'; const root = document.querySelector(rootSelector); let code = root ? root.innerHTML : `${rootSelector} not found.`; - console.log(code) + console.log(code); const { removeEmptyComments, removeComments, transform } = parameters; if (removeEmptyComments) { - code = code.replace(//g, ""); + code = code.replace(//g, ''); } if (removeComments === true) { - code = code.replace(//g, ""); + code = code.replace(//g, ''); } else if (removeComments instanceof RegExp) { code = code.replace(//g, (match, p1) => - removeComments.test(p1) ? "" : match, + removeComments.test(p1) ? '' : match ); } - if (typeof transform === "function") { + if (typeof transform === 'function') { try { code = transform(code); } catch (e) { @@ -41,4 +40,4 @@ export const withHTML = makeDecorator({ if (module && module.hot && module.hot.decline) { module.hot.decline(); -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index fbe3a18..ef99fbc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "postcss": "^8.4.23", - "prettier": "^2.8.8", + "prettier": "2.8.8", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/package.json b/package.json index fdb11d5..ab71c50 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "build-storybook": "storybook build", "chromatic": "chromatic --exit-zero-on-changes", "test-storybook": "test-storybook", - "semantic-release": "semantic-release" + "semantic-release": "semantic-release", + "prettier": "prettier --write ." }, "release": { "branches": [ @@ -50,7 +51,7 @@ "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "postcss": "^8.4.23", - "prettier": "^2.8.8", + "prettier": "2.8.8", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/postcss.config.js b/postcss.config.js index ffc77e2..12a703d 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, - }; \ No newline at end of file + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/src/components/Button.docs.mdx b/src/components/Button.docs.mdx index fb67594..a1dbf03 100644 --- a/src/components/Button.docs.mdx +++ b/src/components/Button.docs.mdx @@ -3,7 +3,7 @@ import { Meta, Primary, Controls, Story } from '@storybook/blocks'; //import * as ButtonStories from './Button.stories'; -import ButtonStories from './Button.stories' +import ButtonStories from './Button.stories'; @@ -22,4 +22,3 @@ A button is ... ### Primary A button can be of primary importance. - diff --git a/src/components/Button.stories.jsx b/src/components/Button.stories.jsx index 7c9cc55..8a8edb2 100644 --- a/src/components/Button.stories.jsx +++ b/src/components/Button.stories.jsx @@ -5,7 +5,7 @@ import { within, userEvent } from '@storybook/testing-library'; export default { title: 'Components/Button', - component: Button + component: Button, }; // return