chore: rework library setup

This change introduces a rework of the entire library.

Prettier config is now solid, support for styled-components, polished, eslint and babel loader has been added.
Also, storybook is now the integral workflow. for the entire library.

Furthermore, the version number has been adjusted to properly reflect the semantic version cycle to be used going forward.

.eslintrc.json

@@ -3,7 +3,7 @@
     "browser": true,
     "es6": true
   },
-  "extends": ["plugin:react/recommended", "airbnb"],
+  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
@@ -23,6 +23,17 @@
       {
         "extensions": [".ts", ".tsx"]
       }
-    ]
+    ],
+    "import/extensions": "off" // fix eslint import extension issues
+  },
+  // fix eslint import extension issues
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "moduleDirectory": ["node_modules", "src/"]
+      }
+    }
   }
 }

.prettierrc

@@ -1,10 +1,11 @@
 {
   "singleQuote": true,
   "jsxSingleQuote": true,
-  "semi": false,
+  "semi": true,
   "tabWidth": 2,
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "arrowParens": "always",
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "import/extensions": ["never"]
 }

.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  stories: [
+    '../src/**/*.stories.@(js|ts|tsx|mdx)',
+    '../docs/**/*.stories.@(js|ts|tsx|mdx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-knobs',
+    '@storybook/addon-docs',
+  ],
+};

.storybook/preview.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { addDecorator } from '@storybook/react';
+// import { GlobalStyle } from '../src/shared/global';
+import { sortStories } from './utils/story-helper';
+
+const SORT_ORDER = {
+  Camara: ['Why Camara', 'About Camara', 'Introduction', 'Getting Started'],
+  Guidelines: ['Buttons'],
+  Typography: [],
+  Layout: [],
+  Forms: [],
+  Components: [],
+  Icons: [],
+  Changelog: ['August 2020 Update'],
+  Playbook: ['How we work', 'Resources', 'Tools we use'],
+};
+
+addDecorator((story) => (
+  <>
+    {/* <GlobalStyle /> */}
+    {story()}
+  </>
+));
+
+export const parameters = {
+  layout: 'centered',
+  actions: { argTypesRegex: '^on.*' },
+  options: {
+    storySort: sortStories(SORT_ORDER),
+  },
+  docs: {},
+};

.storybook/utils/story-helper.js

@@ -0,0 +1,43 @@
+import { some, startsWith } from 'lodash/fp';
+
+function position(item, array = []) {
+  const index = array.indexOf(item);
+  // Show unsorted items at the bottom.
+  return index === -1 ? 10000 : index;
+}
+
+export function sortStories(sortOrder) {
+  const groups = Object.keys(sortOrder);
+
+  return (a, b) => {
+    const aKind = a[1].kind;
+    const bKind = b[1].kind;
+    const [aGroup, aComponent] = splitStoryName(aKind);
+    const [bGroup, bComponent] = splitStoryName(bKind);
+
+    // Preserve story sort order.
+    if (aKind === bKind) {
+      return 0;
+    }
+
+    // Sort stories in a group.
+    if (aGroup === bGroup) {
+      const group = sortOrder[aGroup];
+
+      return position(aComponent, group) - position(bComponent, group);
+    }
+
+    // Sort groups.
+    return position(aGroup, groups) - position(bGroup, groups);
+  };
+}
+
+export function splitStoryName(name) {
+  return name.split('/');
+}
+
+const LINK_PREFIXES = ['/', 'http', 'mailto', '#', 'tel'];
+
+export function isStoryName(name) {
+  return !some((prefix) => startsWith(prefix, name), LINK_PREFIXES);
+}

docs/camara/about.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Camara/About Camara' />
+
+# About Camara
+
+Camara is a design system that helps you build your ideas quickly and with less code. It's an open source project, and it's available to anyone who wants to build with it.
+
+Not much new ideas in it but it will be easy to use and with a reasonable amount of flexibility. Straight up, we are not embarking on building the most robust and flexible UI component library ever. What we are building is a simple UI component library that has been thoughtfully designed and implemented, to scratch our own itch of having to avoid build the same stuffs over again when working on our simple side projects.
+
+Building a design system from the ground up comes with a lot of learning opportunities. These are some of the few things I'm excited to learn more about:
+
+- Design systems and component libraries.
+- Modern User Interface engineering with declarative UI programming,
+- React, TypeScript and CSS-in-JS styling.
+- Components reusability, Inheritance, Composition etc.
+- State management, package bundlers, next-gen JavaScript, etc.
+
+More importantly, by being the developers and users, it means that we can tell if what we have created meets our real needs - make building our side projects easy. Incredibly easy that it almost feels like cheating.
+
+We're so excited 😍 to see what this turns into, and we can't stop thinking of the amazing projects that would be built with this. We feel so pumped and proud 💪🏾.
+
+## The Team
+
+Our team officially formed in mid 2020 with x team members, we're from diverse backgrounds and enjoy working together.

docs/camara/getting-started.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Camara/Getting Started' />
+
+# Getting Started

docs/camara/introduction.stories.mdx

@@ -0,0 +1,56 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Camara/Introduction' />
+
+# Introduction
+
+> Add Brand Image Here
+
+> It's our first time open-sourcing a serious project, and we want to increase our chances of having a positive experience. We hope this helps us communicate the right expectations on our work.
+
+Camara is a design system that helps you build your ideas quickly and with less code. It's an open source project, and it's available to anyone who wants to build with it.
+
+Not much new ideas in it but it will be easy to use and with a reasonable amount of flexibility. Straight up, we are not embarking on building the most robust and flexible UI component library ever.  
+What we are building is a simple UI component library that has been thoughtfully designed and implemented, to scratch our own itch of having to avoid build the same stuffs over again when working on our simple side projects.
+
+## Using this site
+
+The Camara homepage provides expanded guidance and documentation on the design language, component library and style/pattern guide. We want our users to have as much information as possible while exploring Camara.
+
+If you’re new to Camara, start with our [getting started guide](/docs/start/get-started). It has everything you need to design and develop your side projects with Camara.
+
+## Production Use
+
+Camara isn’t ready for production use yet, but we want to give you an early preview of what’s coming. We'd love you to give it a try. As always, we encourage feedback and contributions. We plan to launch Beta this summer and 1.0 early next year.
+
+## Contributions
+
+This project will be open for contributions at version 1.0, right now, our only goal is to show off our work (what we are building) while still working on it publicly. The focus is on getting it to where we feel would be a solid start to our vision - helping you build your ideas quickly and with less code.
+
+You will notice the absence of a contribution guide, and some other piece of a regular open-source project. These are things we are gearing work on and making plans to make them available as soon as we begin accepting contributions.
+
+While we could easily keep working on this in stealth and release when we are ready, we do not think this is the right decision for us at this moment. We are huge advocates of working in public and are proud to show our initial ideas while documenting our progress to where we want to go.  
+Also, building in public keeps us much more accountable and helps fuel our momentum to get our ideas out. We hope you understand this and are excited as much as we look forward to Camara V1.
+
+## Staying informed
+
+- [GitHub](https://github.com/Camaradotspace)
+- [Twitter](https://github.com/preshonyee)
+- \*[Blog](https://camara.space/)
+
+## Something missing?
+
+If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please file an issue for us, or send a tweet mentioning the @camara Twitter account.
+
+### Third Heading
+
+Here is some code
+
+```js
+const x = 'fucking';
+console.log('hello ' + x + ' world');
+```
+
+## Using the playground
+
+You can use live react code to display react component with a preview

docs/camara/why-camara.stories.mdx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Camara/Why Camara' />
+
+# Why Camara
+
+I love working on side projects and I love to put a lot of care into them because I love to build things that "work".
+
+Building beautiful, accessible and responsive user interfaces contributes to a successful side project. When building my side projects, I spend a lot of time trying to get the interface right, and less time on other technical pieces of the project.
+
+Having a well designed user interface in my projects is very important to me. I find it unfriendly to work only on the technical part of my ideas, and package it loosely because "well, it works".
+
+To build projects that feel like enough thought and care was put into making them, there has to be a balance between getting the interface to where I want it to be and working on other technical pieces.
+
+This is why I set out to build a design system. Camara is an attempt at creating that balance.
+
+> If you make a lot of side projects or have made one before, think of all the time you spent in trying to get the user interface to the point you wanted it to be. Accessible, beautiful, and responsive.  
+> Now think of halving that time and investing it into all the other piece of your project that isn't about the interface. How would that have empowered you into making a more rounded project?
+
+Camara aims to buy you back that time. With Camara, building your interfaces is easy and with less code. This empowers you to bring your ideas to life faster and invest time in all other pieces that makes your project tick.
+
+With a design system that takes inspiration from some interesting ideas and best practices around building accessible, beautiful and responsive user interfaces alongside my learnings from past side projects, I can bring my ideas to life faster, without losing out on the thoughtfulness and care I love to put into my side projects.
+
+Camara is a design system that helps you build your ideas quickly and with less code. It's an open source project, and it's available to anyone who wants to build with it.

docs/changelog/0.0.2.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Changelog/August 2020 Update' />
+
+# August 2020 Update
+
+A lot of work has been going on in the background on Camara, and the August release is the one that really set things off for us. We've bumped the version to `0.0.2` and this introduces a whole new set of components and improvements to the tooling that helps us get better at building the design system.
+
+**Here are the most significant changes in August**
+
+1. Introduction of eight(8) new components: We've added buttons, links, typography, empty states, accordion, card, avatar, and badge components.
+
+2. Figma community profile: We now have our own public [Figma community profile](https://figma.com/@camara). The entire design system kit is now public and can be used by designers to quickly compose user interfaces with Camara components. There's also the opportunity to draw inspiration and improvements from the Figma community.
+
+3. StoryBook support: The Camara react project now has support for [StoryBookJS](https://storybook.js.org/). You can rapidly experiment and prototype with all of the components and APIs that makes up the react component library. Check it out here.
+
+4. GitHub actions: We've also experimented with using GitHub actions for both the website and the react component library. So far we love using the [markdown links checker] to check against dead and broken markdown links for our docs, its one of the little things that really improves the quality of our documentation.
+
+**Here's our road map intent for September**
+
+1. Updated documentation: Our documentation isn't where we want it to be yet, and we're making progress on getting it up to date and in sync with new components as soon as they are released.
+
+2. Improve the accessibility and usability of the newly released components.
+
+3. Add support for FramerX: This is something we're actively experimenting with. FramerX helps bring a lot of fidelity to our design prototypes in a whole lot of ways, this opens up a lot of small hidden gaps and nuances in the interface we often miss out on with a tool like Figma.
+
+4. Additional new components: More than just improvements to previous components, September will bring new components to the library.

docs/guidelines/buttons.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Guidelines/Buttons' />
+
+# Button Guidelines

docs/playbook/how-we-work.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Playbook/How we work' />
+
+# How we work

docs/playbook/resources.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Playbook/Resources' />
+
+# Resources

docs/playbook/tools-we-use.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Playbook/Tools we use' />
+
+# Tools we use

example/package.json

@@ -17,11 +17,12 @@
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
+    "camara": "link:..",
+    "eslint": "^6.6.0",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-scripts": "link:../node_modules/react-scripts",
-    "typescript": "link:../node_modules/typescript",
-    "camara": "link:.."
+    "typescript": "link:../node_modules/typescript"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"

example/src/App.tsx

@@ -1,10 +1,16 @@
-import React from 'react'
+import React from 'react';
 
-import { ExampleComponent } from 'camara'
-import 'camara/dist/index.css'
+import { Avatar, Buttons } from 'camara';
+import 'camara/dist/index.css';
 
 const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
-}
+  return (
+    <div>
+      <Buttons />
+      <Avatar />
+      {/* <ExampleComponent text='Create React Library Example 😄' /> */}
+    </div>
+  );
+};
 
-export default App
+export default App;

example/tsconfig.json

@@ -2,7 +2,10 @@
   "compilerOptions": {
     "outDir": "dist",
     "module": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "moduleResolution": "node",
     "jsx": "react",
     "sourceMap": true,
@@ -15,8 +18,21 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "build"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
 }