FabienGreard · Apr 8, 2021 · on Apr 8, 2021 · on Apr 8, 2021
diff --git a/‎.eslintrc.json
+1-1 b/‎.eslintrc.json
+1-1
diff --git a/‎.github/workflows/tests.yml
+3-10 b/‎.github/workflows/tests.yml
+3-10
diff --git a/‎.storybook/main.js
+15 b/‎.storybook/main.js
+15
diff --git a/‎.storybook/preview.js
+5 b/‎.storybook/preview.js
+5
diff --git a/‎CHANGELOG.md
+7-3 b/‎CHANGELOG.md
+7-3
diff --git a/‎README.md
+16-3 b/‎README.md
+16-3
diff --git a/‎babel.config.js
+1-2 b/‎babel.config.js
+1-2
diff --git a/‎components/Header.tsx ‎components/Head.tsx
+5-5 b/‎components/Header.tsx ‎components/Head.tsx
+5-5
diff --git a/‎components/Link.tsx
+17 b/‎components/Link.tsx
+17
diff --git a/‎components/__tests__/Header.test.tsx ‎components/__tests__/Head.test.tsx
+4-4 b/‎components/__tests__/Header.test.tsx ‎components/__tests__/Head.test.tsx
+4-4
diff --git a/‎components/__tests__/Link.test.tsx
+20 b/‎components/__tests__/Link.test.tsx
+20
diff --git a/‎design-system/Button.stories.tsx
+44 b/‎design-system/Button.stories.tsx
+44
diff --git a/‎design-system/Button.tsx
+56 b/‎design-system/Button.tsx
+56
diff --git a/‎design-system/__tests__/__snapshots__/design-system.test.ts.snap
+57 b/‎design-system/__tests__/__snapshots__/design-system.test.ts.snap
+57
diff --git a/‎design-system/__tests__/design-system.test.ts
+3 b/‎design-system/__tests__/design-system.test.ts
+3
@@ -46,7 +46,7 @@
     "react/require-default-props": 0,
     "react/prop-types": 0,
     "react/react-in-jsx-scope": 0,
-    "react/jsx-props-no-spreading": [1, { "exceptions": ["Component", "svg"] }],
+    "react/jsx-props-no-spreading": [1, { "html": "ignore", "exceptions": ["Component"] }],
     "arrow-parens": 0,
     "no-undef": 0,
     "no-console": 1,
 
@@ -96,20 +96,13 @@ jobs:
       - name: Install
         run: yarn install
 
-      - name: Create URL
-        run: |
-          repository=`echo ${GITHUB_REPOSITORY} | sed 's/.*\///g' | tr [:upper:] [:lower:]`
-          branch=`echo ${GITHUB_REF} | sed 's/.*\///g' | tr [:upper:] [:lower:]`
-          owner=`echo ${GITHUB_REPOSITORY} | sed 's/\/.*//g' | tr [:upper:] [:lower:]`
-          URL="https://${repository}-git-${branch}-${owner}.vercel.app"
-          echo "CYPRESS_baseUrl=${URL}" >> $GITHUB_ENV
-          echo ${{ github.event.deployment.id }}
-
       - name: Cypress run
         uses: cypress-io/github-action@v2
         with:
+          build: yarn build
           install: false
-          wait-on: ${{ env.CYPRESS_baseUrl }}/api/healthcheck
+          start: yarn start
+          wait-on: 'http://localhost:3000'
           wait-on-timeout: 120
 
       - name: Store Artifact
 
@@ -0,0 +1,15 @@
+module.exports = {
+  stories: ['../design-system/**/*.stories.mdx', '../design-system/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-storyshots',
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+};
@@ -0,0 +1,5 @@
+import 'tailwindcss/tailwind.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};
@@ -2,10 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## 1.1.0 (2021-03-21)
+## 1.2.0 (2021-03-22)
+
+### Features
 
+- design-system ([#7](https://github.com/FabienGreard/front-end-rocks-boilerplate/issues/7)) ([cc4c825](https://github.com/FabienGreard/front-end-rocks-boilerplate/commit/cc4c8259c1afff4b60350a1a4b7eb7dec43cfdda))
+
+## 1.1.0 (2021-03-21)
 
 ### Features
 
-* pwa support ! ([62c3f95](https://github.com/FabienGreard/front-end-rocks-boilerplate/commit/62c3f9556f39fa11668b22efc48be598f8943f5f))
-* standard-version ([c87898a](https://github.com/FabienGreard/front-end-rocks-boilerplate/commit/c87898aa82c8d43b2409c118bf9f5c092b22666f))
+- pwa support ([#6](https://github.com/FabienGreard/front-end-rocks-boilerplate/issues/6)) ([d28489d](https://github.com/FabienGreard/front-end-rocks-boilerplate/commit/d28489d7d5b28bafb474bab38c6e87ee411c003b))
@@ -3,11 +3,19 @@
 
 # front-end-rocks-boilerplate
 
-This is an opiniated boilerplate with rocking tools for front-end development
+This is an opinionated boilerplate with rocking tools for front-end development.
+
+## Values
+
+This boilerplate aims to provide a way to start a new project with everything from testing to ci/cd out of the box.
+
+Keeping the dependencies up to date is a priority.
+
+You should, with this boilerplate only focus on coding rocking react components! Nothing else!
 
 ## Installation
 
-Start by cloning this repositories then use either `yarn install` or `npm install` to download the dependencies.
+Start by cloning this repository, then use either `yarn install` or `npm install` to download the dependencies.
 
 ## Getting Started
 
@@ -36,11 +44,12 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 | test         |                  jest --silent                  |                                   Launch test |
 | coverage     |            jest --coverage --silent             |                 Generate a coverage from test |
 | e2e          |             cypress run --headless              |                               Launch e2e test |
-| prepare      |                  husky install                  | This is need from husky to set up the project |
+| storybook    |             start-storybook -p 6006             |              Launch storybook (design-system) |
 | bump:patch   | standard-version --release-as patch --no-verify |                            v.0.0.0 => v.0.0.1 |
 | bump:minor   | standard-version --release-as minor --no-verify |                            v.0.0.0 => v.0.1.0 |
 | bump:major   | standard-version --release-as major --no-verify |                            v.0.0.0 => v.1.0.0 |
 | clear        |              node scripts/clear.js              |                 clear node_modules and \*lock |
+| prepare      |                  husky install                  | This is need from husky to set up the project |
 
 ## Acknowledgement
 
@@ -51,6 +60,7 @@ This project is build with :
 - [Typescript](https://www.typescriptlang.org/)
 - [react-intl](https://formatjs.io/)
 - [Jest](https://jestjs.io/)
+- [storybook](https://storybook.js.org/)
 - [Cypress](https://www.cypress.io/)
 - [Prettier](https://prettier.io/)
 - [Eslint](https://eslint.org/)
@@ -63,6 +73,9 @@ This project is build with :
 
 This project use [testing-library](https://testing-library.com/) for both unit test and e2e.
 
+- [react](https://testing-library.com/docs/react-testing-library/intro)
+- [cypress](https://testing-library.com/docs/cypress-testing-library/intro)
+- [jest-dom](https://github.com/testing-library/jest-dom)
 - [react-hooks](https://react-hooks-testing-library.com/)
 
 ## Git Commit Convention
 
@@ -5,8 +5,7 @@ module.exports = {
       {
         'preset-env': {
           useBuiltIns: false,
-          targets:
-            'Edge >= 83, Firefox >= 78, FirefoxAndroid  >= 78, Chrome >= 80, ChromeAndroid >= 80, Opera >= 67, OperaMobile >= 67, Safari >= 13.1, iOS >= 13.4',
+          targets: 'last 2 versions, not dead, >0.2%, not IE 11',
         },
       },
     ],
 
@@ -1,21 +1,21 @@
-import Head from 'next/head';
+import NextHead from 'next/head';
 
 import { SEO } from 'utils/constant';
 
-interface HeaderProps {
+interface Props {
   title?: string;
   description?: string;
 }
 
-export default function Header({ title = SEO.title, description = SEO.description }: HeaderProps) {
+export default function Head({ title = SEO.title, description = SEO.description }: Props) {
   return (
-    <Head>
+    <NextHead>
       <title>{title}</title>
       <meta name="description" content={description} />
       <link rel="icon" href="/favicon.ico" />
       <link rel="manifest" href="/manifest.json" />
       <meta name="theme-color" content="#fff" />
       <link rel="apple-touch-icon" href="/images/192.png" />
-    </Head>
+    </NextHead>
   );
 }
@@ -0,0 +1,17 @@
+import { ComponentType } from 'react';
+import Link from 'next/link';
+
+export const withLink = <T extends Object>(Component: ComponentType<T>) => ({
+  href,
+  locale,
+  ...props
+}: T & { href: string; locale?: string }) => (
+  <Link href={href} locale={locale} passHref>
+    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+    <a className="outline-none">
+      <Component {...((props as unknown) as T)} />
+    </a>
+  </Link>
+);
+
+export default Link;
@@ -1,24 +1,24 @@
 import { render } from '@testing-library/react';
-import Header from 'components/Header';
+import Head from 'components/Head';
 
 import { SEO } from 'utils/constant';
 
 describe('Header', () => {
   test('Should had default values', () => {
-    render(<Header />);
+    render(<Head />);
 
     expect(document.title).toEqual(SEO.title);
     expect((document.head.querySelector('meta[name=description]') as HTMLMetaElement).content).toEqual(SEO.description);
   });
 
   test('Should set a custom document title', () => {
-    render(<Header title="New document title" />);
+    render(<Head title="New document title" />);
 
     expect(document.title).toEqual('New document title');
   });
 
   test('Should set a custom meta description', () => {
-    render(<Header description="New description meta" />);
+    render(<Head description="New description meta" />);
 
     expect((document.head.querySelector('meta[name=description]') as HTMLMetaElement).content).toEqual(
       'New description meta',
 
@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react';
+import Link, { withLink } from 'components/Link';
+
+describe('Link', () => {
+  test('Should render a Link element', () => {
+    const { getByText } = render(<Link href="/">link</Link>);
+
+    expect(getByText('link')).toBeInTheDocument();
+    expect(getByText('link')).toHaveAttribute('href', '/');
+  });
+
+  test('Should render a Link element', () => {
+    const TitleWithLink = withLink(() => <h1>title</h1>);
+
+    const { getByText, container } = render(<TitleWithLink href="/" />);
+
+    expect(getByText('title')).toBeInTheDocument();
+    expect(container.querySelector('a')).toHaveAttribute('href', '/');
+  });
+});
@@ -0,0 +1,44 @@
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { Button, ButtonProps } from './Button';
+
+export default {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta;
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template: Story<ButtonProps> = args => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};
@@ -0,0 +1,56 @@
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button: React.FC<ButtonProps> = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}) => {
+  const BASE_BUTTON = 'uppercase tracking-wider box-border';
+  const PRIMARY_BUTTON = `${BASE_BUTTON} bg-blue-200 border border-blue-200 text-white focus:outline-none focus:bg-blue-400 focus:border-blue-400 hover:bg-blue-400 hover:border-blue-400`;
+  const SECONDARY_BUTTON = `${BASE_BUTTON} border border-gray-200 text-black focus:outline-none focus:border-gray-400 hover:border-gray-400`;
+
+  const SIZE_BUTTON = {
+    small: 'rounded-sm text-sm px-2 py-1',
+    medium: 'rounded-md text-md px-3 py-2',
+    large: 'rounded-lg text-lg px-4 py-3',
+  };
+
+  return (
+    <button
+      type="button"
+      className={`${primary ? PRIMARY_BUTTON : SECONDARY_BUTTON} ${SIZE_BUTTON[size]}`}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default Button;
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Example/Button Large 1`] = `
+<button
+  className="uppercase tracking-wider box-border border border-gray-200 text-black focus:outline-none focus:border-gray-400 hover:border-gray-400 rounded-lg text-lg px-4 py-3"
+  style={
+    Object {
+      "backgroundColor": undefined,
+    }
+  }
+  type="button"
+>
+  Button
+</button>
+`;
+
+exports[`Storyshots Example/Button Primary 1`] = `
+<button
+  className="uppercase tracking-wider box-border bg-blue-200 border border-blue-200 text-white focus:outline-none focus:bg-blue-400 focus:border-blue-400 hover:bg-blue-400 hover:border-blue-400 rounded-md text-md px-3 py-2"
+  style={
+    Object {
+      "backgroundColor": undefined,
+    }
+  }
+  type="button"
+>
+  Button
+</button>
+`;
+
+exports[`Storyshots Example/Button Secondary 1`] = `
+<button
+  className="uppercase tracking-wider box-border border border-gray-200 text-black focus:outline-none focus:border-gray-400 hover:border-gray-400 rounded-md text-md px-3 py-2"
+  style={
+    Object {
+      "backgroundColor": undefined,
+    }
+  }
+  type="button"
+>
+  Button
+</button>
+`;
+
+exports[`Storyshots Example/Button Small 1`] = `
+<button
+  className="uppercase tracking-wider box-border border border-gray-200 text-black focus:outline-none focus:border-gray-400 hover:border-gray-400 rounded-sm text-sm px-2 py-1"
+  style={
+    Object {
+      "backgroundColor": undefined,
+    }
+  }
+  type="button"
+>
+  Button
+</button>
+`;
@@ -0,0 +1,3 @@
+import initStoryshots from '@storybook/addon-storyshots';
+
+initStoryshots();
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import initStoryshots from '@storybook/addon-storyshots';`
	`2`	`+`
	`3`	`+initStoryshots();`