refactor: refactored build system + renamed project (#67)

👀

.storybook/__stories__/docs.story.tsx

@@ -2,19 +2,63 @@ import * as React from 'react';
 import { storiesOf, StoryDecorator } from '@storybook/react';
 import Markdown from 'react-markdown';
 
-import Wrapper from '../components/Wrapper';
-import { markdownRenderers } from '../components/DocsElements';
+import Wrapper from 'components/Wrapper';
+import { markdownRenderers } from 'components/DocsElements';
+import IntroHeader from 'components/IntroHeader';
 
-const Readme = require('../../README.md');
-const Contributing = require('../../CONTRIBUTING.md');
+import Introduction from '@docs/introduction.md';
+import GettingStarted from '@docs/getting-started.md';
+import Contributing from '@docs/contributing.md';
+import UsingAssets from '@docs/using-assets.md';
+import Fonts from '@docs/fonts.md';
+import Theming from '@docs/theming.md';
 
 const StoryWrapper: StoryDecorator = storyFn => <Wrapper>{storyFn()}</Wrapper>;
 
 const story = storiesOf('Documentation', module).addDecorator(StoryWrapper);
 
-story.add('Readme', () => (
-  <Markdown source={Readme} renderers={markdownRenderers} />
+story.add('Introduction', () => (
+  <div>
+    <IntroHeader>
+      <img src={require('../../assets/wicara-banner.png')} />
+      <div>
+        <p>
+          <strong>wicara /wi·ca·ra/ (noun)</strong>
+          <br />a series of voices in a language used to communicate words and
+          sentences.
+        </p>
+
+        <p>
+          <a href="https://travis-ci.org/kata-ai/kata-kit">
+            <img
+              alt="Build Status"
+              src="https://img.shields.io/travis/kata-ai/kata-kit.svg"
+            />
+          </a>{' '}
+          <a href="https://lernajs.io/">
+            <img
+              alt="Build Status"
+              src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg"
+            />
+          </a>
+        </p>
+      </div>
+    </IntroHeader>
+    <Markdown source={Introduction} renderers={markdownRenderers} />
+  </div>
+));
+story.add('Getting Started', () => (
+  <Markdown source={GettingStarted} renderers={markdownRenderers} />
 ));
-story.add('Contributing Guidelines', () => (
+story.add('Contributing', () => (
   <Markdown source={Contributing} renderers={markdownRenderers} />
 ));
+story.add('Using Assets', () => (
+  <Markdown source={UsingAssets} renderers={markdownRenderers} />
+));
+story.add('Fonts', () => (
+  <Markdown source={Fonts} renderers={markdownRenderers} />
+));
+story.add('Theming', () => (
+  <Markdown source={Theming} renderers={markdownRenderers} />
+));

.storybook/components/DocsElements.tsx

@@ -28,14 +28,14 @@ export const ContentRoot = styled('div')`
   h1 {
     padding-bottom: ${variables.spaces.space1};
     border-bottom: 1px solid ${variables.colors.gray30};
-    font-size: 36px;
+    font-size: 32px;
   }
 
   h2 {
     margin-top: 1.5rem;
     padding-bottom: ${variables.spaces.space1};
     border-bottom: 1px solid ${variables.colors.gray30};
-    font-size: 28px;
+    font-size: 24px;
   }
 
   h3 {
@@ -47,7 +47,7 @@ export const ContentRoot = styled('div')`
   h5,
   h6 {
     margin-top: 1.25rem;
-    font-size: 20px;
+    font-size: 28px;
   }
 
   p,

.storybook/components/IntroHeader.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { variables } from '@kata-kit/theme';
+
+const IntroHeader = styled('header')`
+  margin-bottom: ${variables.spaces.space3};
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: ${variables.spaces.space3};
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: 300;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+`;
+
+export default IntroHeader;

.storybook/tsconfig.json

@@ -1,16 +1,14 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "module": "commonjs",
     "removeComments": false,
     "composite": false,
+    "baseUrl": "./",
     "paths": {
-      "@doc-utils": ["../.storybook"],
+      "@doc-utils": ["./"],
       "@docs": ["../docs"],
-      "@kata-kit/*": ["./*/src"],
-      "@kata-kit/doc-utils": ["../doc-utils/src"]
+      "@kata-kit/*": ["../packages/*/src"]
     }
-  },
-  "include": ["../", "../types/**/*.d.ts"],
-  "exclude": ["../node_modules", "../scripts", "../build", "../website"]
+  }
 }

.storybook/webpack.config.js

@@ -43,9 +43,17 @@ module.exports = (baseConfig, env, config) => {
 
   // Workaround for webpack v4.
   if (config.resolve.plugins) {
-    config.resolve.plugins.push(new TsconfigPathsPlugin());
+    config.resolve.plugins.push(
+      new TsconfigPathsPlugin({
+        configFile: '.storybook/tsconfig.json'
+      })
+    );
   } else {
-    config.resolve.plugins = [new TsconfigPathsPlugin()];
+    config.resolve.plugins = [
+      new TsconfigPathsPlugin({
+        configFile: '.storybook/tsconfig.json'
+      })
+    ];
   }
 
   return config;

.travis.yml

@@ -1,6 +1,8 @@
 language: node_js
 node_js:
-  - "stable"
+  - 'stable'
+  - '8'
+  - '10'
 
 cache:
   yarn: true

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing Guidelines
 
-kata-kit is open source, so every component in kata-kit is developed by your help. You too can help contribute to this project! This page describes how to setup the project on your computer for local development.
+Wicara is open source, so every component in Wicara is developed by your help. You too can help contribute to this project! This page describes how to setup the project on your computer for local development.
 
 This project is bound by a [Code of Conduct](CODE_OF_CONDUCT.md).
 
@@ -82,12 +82,3 @@ info Storybook started on => http://localhost:9001/
 ```
 
 The storybook server is available at `http://localhost:9001`. Note that any new component needs to have at least one story as a demo.
-
-### Demo Page
-
-The kata-kit website (located on the `website/` folder) also serves as a development environment for our components. Run the following command to start it locally:
-
-```sh-session
-$ cd website
-$ yarn dev
-```

README.md

@@ -1,34 +1,44 @@
-# kata-kit
+<p align="center">
+  <img alt="Wicara" src="assets/wicara-banner.png" />
+</p>
 
-[![build Status)](https://img.shields.io/travis/kata-ai/kata-kit.svg)](https://travis-ci.org/kata-ai/kata-kit) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
+<p align="center">
+  <strong>wicara /wi·ca·ra/ (noun)</strong><br>
+  a series of voices in a language used to communicate words and sentences.
+</p>
 
-> The component library powering the Kata.ai platform.
+<p align="center">
+  <a href="https://travis-ci.org/kata-ai/kata-kit"><img alt="Build Status" src="https://img.shields.io/travis/kata-ai/kata-kit.svg" /></a>
+  <a href="https://lernajs.io/"><img alt="Build Status" src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" /></a>
+</p>
 
-`kata-kit` is the React implementation of the Kata Design System (KDS). Developing apps according to KDS is now easy thanks to this library of modular, reusable components.
+---
+
+**Wicara** (previously kata-kit) is the React implementation of the Kata Design System (KDS). Developing apps according to KDS is now easy thanks to this library of modular, reusable components.
 
-**Note: kata-kit is still in beta.**
+**Note: Wicara is still in beta.**
 
 ---
 
 ## Contributing
 
-kata-kit is developed by the help of developers like you! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started on developing kata-kit.
+Wicara is developed by the help of developers like you! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started on developing Wicara.
 
 This project is bound by a [Code of Conduct](CODE_OF_CONDUCT.md).
 
 ## Usage
 
 ### Prerequisites
 
-At the bare minimum, you should at least import the global CSS reset provided by `kata-kit`.
+At the bare minimum, you should at least import the global CSS reset provided by Wicara.
 
 ```js
 import '@kata-kit/reset';
 ```
 
 ### Example
 
-`kata-kit` is built in React, with styling done in styled-components. To use these components, import them as follows:
+Wicara is built in React, with styling done in styled-components. To use these components, import them as follows:
 
 ```jsx
 // Example for `<Button />` component.

docs/contributing.md

@@ -0,0 +1,5 @@
+# Contributing
+
+Wicara is developed by the help of developers like you! Please read our [Contributing Guidelines](https://github.com/kata-ai/kata-kit/blob/master/CONTRIBUTING.md) to get started on developing Wicara.
+
+This project is bound by a [Code of Conduct](https://github.com/kata-ai/kata-kit/blob/master/CODE_OF_CONDUCT.md).

packages/fonts/docs/index.mdx → docs/fonts.md

@@ -1,6 +1,20 @@
-## Usage
+# Fonts
 
 We use two fonts in Kata Design Language: `Museo Sans`, and `Museo Sans Rounded`.
+
+## Installation
+
+```sh
+# yarn
+$ yarn add @kata-kit/fonts
+# npm
+$ npm i @kata-kit/fonts
+```
+
+## Usage
+
+### Body fonts
+
 To use these fonts within your app, import as follows:
 
 ```jsx
@@ -10,7 +24,7 @@ import '@kata-kit/fonts/museo-sans.css';
 import '@kata-kit/fonts/museo-sans-rounded.css';
 ```
 
-## Icon fonts
+### Icon fonts
 
 We also provided some icon sets. To use them, import as follows:
 

docs/getting-started.md

@@ -0,0 +1,22 @@
+# Getting Started
+
+## Prerequisites
+
+At the bare minimum, you should at least import the global CSS reset provided by Wicara.
+
+```js
+import '@kata-kit/reset';
+```
+
+## Example
+
+Wicara is built in React, with styling done in styled-components. To use these components, import them as follows:
+
+```jsx
+// Example for `<Button />` component.
+
+import * as React from 'react';
+import { Button } from '@kata-kit/button';
+
+export default () => <Button>Push Me</Button>;
+```

docs/introduction.md

@@ -0,0 +1,31 @@
+# Introduction
+
+**Wicara** (previously kata-kit) is the React implementation of the Kata Design System (KDS). Developing apps according to KDS is now easy thanks to this library of modular, reusable components.
+
+**Note: Wicara is still in beta.**
+
+## Principles
+
+These principles guide us on what to strive for when building components for Wicara.
+
+### Clear and transparent.
+
+- Use component/prop names that are as clear and standard as possible.
+- Strive for component + prop names no longer than 2-3 words.
+- Use the onVerb naming structure for event handlers.
+- Keep component/prop names concise without being clever.
+- When in doubt, look at other component libraries for inspiration.
+
+### Modular and reusable.
+
+- Components should do one thing and do it well.
+- Strive for a modular component architecture. Prefer importing existing components with similar uses rather than reinventing the wheel.
+- Consider leveraging React features + patterns like render/children props for enhanced modularity + easy reuse of components.
+- Strive for a cleaner API. Don’t expose underlying internals in the API unless necessary.
+- Use the theming API to ensure components can be restyled outside of the library itself.
+
+### Accessibility comes first.
+
+- Components should be designed with accessibility in mind. Make sure the fancy features doesn’t break accessibility. (Morten Rand-Hendriksen)
+- Strive for an accessible color contrast ratio. Aim for a contrast rating higher than “AA” and “AA Large”. (Check your color contrast [here](https://colorable.jxnblk.com/))
+- Make sure components work well with screen readers, as well as for users with limited access to keyboards and mice.