First release

node_modules/nes.css/story/_helpers/icons.js

@@ -0,0 +1,44 @@
+export const Icons = {
+  twitter: 'twitter',
+  facebook: 'facebook',
+  github: 'github',
+  google: 'google',
+  youtube: 'youtube',
+  whatsapp: 'whatsapp',
+  gmail: 'gmail',
+  linkedin: 'linkedin',
+  instagram: 'instagram',
+  close: 'close',
+  coin: 'coin',
+  trophy: 'trophy',
+};
+
+export const Sprites = {
+  'nes-pokeball': 'nes-pokeball',
+  'nes-bulbasaur': 'nes-bulbasaur',
+  'nes-charmander': 'nes-charmander',
+  'nes-squirtle': 'nes-squirtle',
+  'nes-smartphone': 'nes-smartphone',
+  'nes-kirby': 'nes-kirby',
+  'nes-phone': 'nes-phone',
+  'nes-octocat animate': 'nes-octocat animate',
+  'nes-ash': 'nes-ash',
+  'nes-mario': 'nes-mario',
+  'nes-logo': 'nes-logo',
+  'nes-jp-logo': 'nes-jp-logo',
+  'snes-logo': 'snes-logo',
+  'snes-jp-logo': 'snes-jp-logo',
+};
+
+export const Reactions = {
+  heart: 'heart',
+  star: 'star',
+  like: 'like',
+};
+
+export const Size = {
+  default: '',
+  'is-small': 'is-small',
+  'is-medium': 'is-medium',
+  'is-large': 'is-large',
+};

node_modules/nes.css/story/_helpers/shared.js

@@ -0,0 +1,5 @@
+export default {
+  'is-success': 'is-success',
+  'is-warning': 'is-warning',
+  'is-error': 'is-error',
+};

node_modules/nes.css/story/avatars/avatars.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Avatars from './avatars.template';
+
+storiesOf('Avatars', module)
+  .addDecorator(withKnobs)
+  .add('Avatar', () => Avatars());

node_modules/nes.css/story/avatars/avatars.template.js

@@ -0,0 +1,26 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isRounded = boolean('is-rounded', false);
+  const avatarSize = select('Avatar Classes', {
+    default: '',
+    'is-small': 'is-small',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, '');
+
+  const avatarClasses = classNames(
+    'nes-avatar',
+    avatarSize,
+    {
+      'is-rounded': isRounded,
+    },
+  );
+
+  return `
+    <img src="http://www.gravatar.com/avatar?s=15" class="${avatarClasses}"
+      alt="Gravatar Image Example"
+      style="image-rendering: pixelated;">
+  `;
+};

node_modules/nes.css/story/badge/badge.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Badge from './badge.template';
+
+storiesOf('Badges', module)
+  .addDecorator(withKnobs)
+  .add('Badge', () => Badge());

node_modules/nes.css/story/badge/badge.template.js

@@ -0,0 +1,38 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const sharedComponentOptions = {
+    'is-dark': 'is-dark',
+    'is-primary': 'is-primary',
+    ...sharedOptions,
+  };
+
+  const iconStyle = select('Badge Display', {
+    default: '',
+    'is-splited': 'is-splited',
+    'is-icon': 'is-icon',
+  }, 'is-splited');
+
+  const leftOptions = select('Left Style', {
+    ...sharedComponentOptions,
+  }, 'is-dark');
+
+  const rightOptions = select('Right Style', {
+    ...sharedComponentOptions,
+  }, 'is-success');
+
+  const badgeClasses = classNames(
+    'nes-badge',
+    iconStyle,
+  );
+
+  return `
+    <a href="#" class="${badgeClasses}">
+      <span class="${leftOptions}">npm</span>
+      <span class="${rightOptions}">1.0.0</span>
+    </a>
+  `;
+};

node_modules/nes.css/story/balloons/balloons.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Ballons from './balloons.template';
+
+storiesOf('Balloons', module)
+  .addDecorator(withKnobs)
+  .add('Balloon', () => Ballons());

node_modules/nes.css/story/balloons/balloons.template.js

@@ -0,0 +1,25 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+  const balloonDirection = select('Direction', {
+    default: '',
+    'from-left': 'from-left',
+    'from-right': 'from-right',
+  }, '');
+
+  const balloonClasses = classNames(
+    'nes-balloon',
+    balloonDirection,
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div class="${balloonClasses}">
+      <p>Hello NES.css</p>
+    </div>
+  `;
+};

node_modules/nes.css/story/buttons/buttons.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Buttons from './buttons.template';
+
+storiesOf('Buttons', module)
+  .addDecorator(withKnobs)
+  .add('Buttons', () => Buttons());

node_modules/nes.css/story/buttons/buttons.template.js

@@ -0,0 +1,26 @@
+import { select } from '@storybook/addon-knobs';
+
+import sharedOption from '../_helpers/shared';
+
+export default () => {
+  const buttonType = select('Button Type', {
+    button: 'button',
+    file: 'file',
+  }, 'button');
+
+  const buttonClasses = select('Button Classes', {
+    default: '',
+    'is-primary': 'is-primary',
+    ...sharedOption,
+    'is-disabled': 'is-disabled',
+  }, '');
+
+  return buttonType === 'button' ? `
+    <button type="button" class="nes-btn ${buttonClasses}">Normal</button>
+  ` : `
+    <label class="nes-btn ${buttonClasses}">
+      <span>Select your file</span>
+      <input type="file">
+    </label>
+  `;
+};

node_modules/nes.css/story/containers/containers.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Containers from './containers.template';
+
+storiesOf('Containers', module)
+  .addDecorator(withKnobs)
+  .add('Container', () => Containers());

node_modules/nes.css/story/containers/containers.template.js

@@ -0,0 +1,31 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+  const isRounded = boolean('is-rounded', false);
+  const withTitle = boolean('with-title', false);
+
+  const containerAlignment = select('Alignment', {
+    default: '',
+    'is-centered': 'is-centered',
+    'is-right': 'is-right',
+  }, '');
+
+  const containerClasses = classNames(
+    'nes-container',
+    containerAlignment,
+    {
+      'is-dark': isDark,
+      'is-rounded': isRounded,
+      'with-title': withTitle,
+    },
+  );
+
+  return `
+    <div class="${containerClasses}">
+      ${withTitle ? '<p class="title">Container</p>' : ''}
+      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+    </div>
+  `;
+};

node_modules/nes.css/story/dialogs/dialogs.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Dialogs from './dialogs.template';
+
+storiesOf('Dialogs', module)
+  .addDecorator(withKnobs)
+  .add('Dialog', () => Dialogs());

node_modules/nes.css/story/dialogs/dialogs.template.js

@@ -0,0 +1,23 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isOpen = boolean('Open', true) ? 'open' : '';
+  const isRounded = boolean('is-rounded', false);
+  const isDark = boolean('is-dark', false);
+
+  const dialogClasses = classNames(
+    'nes-dialog',
+    {
+      'is-rounded': isRounded,
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <dialog class="${dialogClasses}" ${isOpen}>
+      <p class="title">Dialog</p>
+      <p>Alert: this is a dialog.</p>
+    </dialog>
+  `;
+};

node_modules/nes.css/story/icons/icons.stories.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Icons from './icons.template';
+import Sprites from './sprites.template';
+import Reactions from './reactions.template';
+
+storiesOf('Icons', module)
+  .addDecorator(withKnobs)
+  .add('Icons', () => Icons())
+  .add('Sprites', () => Sprites())
+  .add('Reactions', () => Reactions());

node_modules/nes.css/story/icons/icons.template.js

@@ -0,0 +1,23 @@
+import { radios, select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import { Icons, Size } from '../_helpers/icons';
+
+export default () => {
+  const selectedIcon = select('class', {
+    ...Icons,
+  }, 'twitter');
+
+  const iconSize = radios('Icon Size', {
+    ...Size,
+  }, '');
+
+  const iconClasses = classNames(
+    'nes-icon',
+    selectedIcon,
+    iconSize,
+  );
+  return `
+    <i class="${iconClasses}"></i>
+  `;
+};

node_modules/nes.css/story/icons/reactions.template.js

@@ -0,0 +1,33 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import { Reactions } from '../_helpers/icons';
+
+export default () => {
+  const reactionIcon = select('Reaction Icon', {
+    ...Reactions,
+  }, 'heart');
+
+  const reactionSize = select('Size Class', {
+    'is-small': 'is-small',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, 'is-large');
+
+  const reactionFill = select('Fill Class', {
+    default: '',
+    'is-half': 'is-half',
+    'is-transparent': 'is-transparent',
+    'is-empty': 'is-empty',
+  });
+
+  const reactionClasses = classNames(
+    'nes-icon',
+    reactionIcon,
+    reactionSize,
+    reactionFill,
+  );
+  return `
+    <i class="${reactionClasses}"></i>
+  `;
+};

node_modules/nes.css/story/icons/sprites.template.js

@@ -0,0 +1,13 @@
+import { select } from '@storybook/addon-knobs';
+
+import { Sprites } from '../_helpers/icons';
+
+export default () => {
+  const selectedSprite = select('class', {
+    ...Sprites,
+  }, 'nes-pokeball');
+
+  return `
+    <i class="${selectedSprite}"></i>
+  `;
+};

node_modules/nes.css/story/inputs/checkboxes.template.js

@@ -0,0 +1,22 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+
+  const checkBoxClasses = classNames(
+    'nes-checkbox',
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div style="${isDark ? 'background-color: black;' : ''}">
+      <label>
+        <input type="checkbox" class="${checkBoxClasses}" checked />
+        <span>Enable</span>
+      </label>
+    </div>
+  `;
+};

node_modules/nes.css/story/inputs/input.template.js

@@ -0,0 +1,20 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const inputOptions = select('Input Classes', {
+    default: '',
+    ...sharedOptions,
+  }, '');
+
+  const inputClasses = classNames(
+    'nes-input',
+    inputOptions,
+  );
+
+  return `
+    <input type="text" id="name_field" class="${inputClasses}" placeholder="NES.css">
+  `;
+};

node_modules/nes.css/story/inputs/inputs.stories.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Input from './input.template';
+import CheckBox from './checkboxes.template';
+import Radio from './radio.template';
+
+storiesOf('Inputs', module)
+  .addDecorator(withKnobs)
+  .add('Input', () => Input())
+  .add('Checkbox', () => CheckBox())
+  .add('Radio', () => Radio());

node_modules/nes.css/story/inputs/radio.template.js

@@ -0,0 +1,27 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+
+  const radioClasses = classNames(
+    'nes-radio',
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div style="${isDark ? 'background-color: black;' : ''}">
+      <label>
+        <input type="radio" class="${radioClasses}" name="answer" checked />
+        <span>Yes</span>
+      </label>
+      <label>
+        <input type="radio" class="${radioClasses}" name="answer" />
+        <span>No</span>
+      </label>
+    </div>
+  `;
+};

node_modules/nes.css/story/lists/lists.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Lists from './lists.template';
+
+storiesOf('Lists', module)
+  .addDecorator(withKnobs)
+  .add('List', () => Lists());

node_modules/nes.css/story/lists/lists.template.js

@@ -0,0 +1,23 @@
+import { radios } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const listOptions = radios('List Type', {
+    'is-disc': 'is-disc',
+    'is-circle': 'is-circle',
+  }, 'is-disc');
+
+  const listClasses = classNames(
+    'nes-list',
+    listOptions,
+  );
+
+  return `
+    <ul class="${listClasses}">
+      <li>Good morning.</li>
+      <li>Thou hast had a good night's sleep, I hope.</li>
+      <li>Thou hast had a good afternoon</li>
+      <li>Good night.</li>
+    </ul>
+  `;
+};

node_modules/nes.css/story/progress/progress.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Progress from './progress.template';
+
+storiesOf('Progress', module)
+  .addDecorator(withKnobs)
+  .add('Progress', () => Progress());

node_modules/nes.css/story/progress/progress.template.js

@@ -0,0 +1,32 @@
+import { select, boolean, number } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOption from '../_helpers/shared';
+
+export default () => {
+  const isRounded = boolean('is-rounded', false);
+  const progressTypes = select('Progress Style', {
+    default: '',
+    'is-dark': 'is-dark',
+    ...sharedOption,
+  }, '');
+
+  const percentage = number('Percentage', 30, {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1,
+  });
+
+  const progessClasses = classNames(
+    'nes-progress',
+    progressTypes,
+    {
+      'is-rounded': isRounded,
+    },
+  );
+
+  return `
+    <progress class="nes-progress ${progessClasses}" value="${percentage}" max="100" style="width: 100%;"></progress>
+  `;
+};

node_modules/nes.css/story/select/select.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Select from './select.template';
+
+storiesOf('Selects', module)
+  .addDecorator(withKnobs)
+  .add('Select', () => Select());

node_modules/nes.css/story/select/select.template.js

@@ -0,0 +1,21 @@
+import { select } from '@storybook/addon-knobs';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const selectedClass = select('class', {
+    default: '',
+    ...sharedOptions,
+    'is-dark': 'is-dark',
+  }, '');
+
+  return `
+    <div class="nes-select ${selectedClass}">
+      <select required>
+        <option value="" disabled selected hidden>Select...</option>
+        <option value="0">To be</option>
+        <option value="1">Not to be</option>
+      </select>
+    </div>
+  `;
+};

node_modules/nes.css/story/table/table.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Table from './table.template';
+
+storiesOf('Tables', module)
+  .addDecorator(withKnobs)
+  .add('Table', () => Table());

node_modules/nes.css/story/table/table.template.js

@@ -0,0 +1,41 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isBorderd = boolean('is-bordered', true);
+  const isCentered = boolean('is-centered', false);
+  const isDark = boolean('is-dark', false);
+
+  const tableClasses = classNames(
+    'nes-table',
+    {
+      'is-bordered': isBorderd,
+      'is-centered': isCentered,
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <table class="nes-table ${tableClasses}" style="margin:15px 4px 5px 4px">
+      <thead>
+        <tr>
+          <th>Table.is-dark</th>
+          <th>Table.is-bordered</th>
+          <th>Table.is-centered</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Thou hast had a good morning</td>
+          <td>Thou hast had a good afternoon</td>
+          <td>Thou hast had a good night</td>
+        </tr>
+        <tr>
+          <td>Thou hast had a good morning</td>
+          <td>Thou hast had a good afternoon</td>
+          <td>Thou hast had a good night</td>
+        </tr>
+      </tbody>
+    </table>
+  `;
+};

node_modules/nes.css/story/text/text.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Text from './text.template';
+
+storiesOf('Text', module)
+  .addDecorator(withKnobs)
+  .add('Text', () => Text());

node_modules/nes.css/story/text/text.template.js

@@ -0,0 +1,22 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const textOptions = select('Radio Classes', {
+    default: '',
+    'is-primary': 'is-primary',
+    ...sharedOptions,
+    'is-disabled': 'is-disabled',
+  }, '');
+
+  const textClasses = classNames(
+    'nes-text',
+    textOptions,
+  );
+
+  return `
+    <span class="nes-text ${textClasses}">NES.css</span>
+  `;
+};

node_modules/nes.css/story/textarea/textarea.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Textarea from './textarea.template';
+
+storiesOf('Textareas', module)
+  .addDecorator(withKnobs)
+  .add('Textarea', () => Textarea());

node_modules/nes.css/story/textarea/textarea.template.js

@@ -0,0 +1,20 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const textareaOption = select('Textarea Classes', {
+    default: '',
+    ...sharedOptions,
+  }, '');
+
+  const textareaClasses = classNames(
+    'nes-textarea',
+    textareaOption,
+  );
+
+  return `
+    <textarea id="textarea_field" class="${textareaClasses}" placeholder="NES.css"></textarea>
+  `;
+};