feat(datetime): Add component

.eslintrc

@@ -13,6 +13,7 @@
     "jsx-quotes": [2, "prefer-single"],
     "max-len": [2, 120, 4],
     "no-console": 2,
+    "no-mixed-operators": 0,
     "no-multi-spaces": [2, { "ignoreEOLComments": true }],
     "no-return-assign": [2, "except-parens"],
     "no-underscore-dangle": 0,

docs/app/Components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.js

@@ -20,7 +20,11 @@ const rowStyle = {
   flexDirection: 'row',
 }
 
-const getTagType = tag => (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name)
+const getTagType = (tag) => {
+  if (!tag || !tag.type || tag.type.type === 'any') return 'any'
+
+  return tag.type.name
+}
 
 const ComponentPropFunctionSignature = ({ name, tags }) => {
   const params = _.filter(tags, { title: 'param' })

docs/app/Examples/addons/Datetime/Content/DatetimeExampleFormatters.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+// IE or standard language
+const locale = navigator.userLanguage || navigator.language
+
+// Locale formatted date
+const dateFormatter = date => date.toLocaleDateString(locale)
+
+// Locale formatted 12-hour time with seconds removed
+const timeFormatter = date => date.toLocaleTimeString(locale, { hour12: true }).replace(/:\d+ /, ' ')
+
+const DatetimeExampleFormatters = () => (
+  <Datetime
+    time
+    dateFormatter={dateFormatter}
+    timeFormatter={timeFormatter}
+  />
+)
+
+export default DatetimeExampleFormatters

docs/app/Examples/addons/Datetime/Content/Time24HourExample.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const Time24HourExample = () => (
+  <Datetime
+    time
+    icon='time'
+    date={false}
+    hourFormatter={(date) => {
+      const options = { hour12: false }
+      return date.toLocaleTimeString('en-US', options).substr(0, 5)
+    }}
+    timeFormatter={(date) => {
+      const options = { hour12: false }
+      return date.toLocaleTimeString('en-US', options).substr(0, 5)
+    }}
+  />
+)
+
+export default Time24HourExample

docs/app/Examples/addons/Datetime/Content/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DatetimeContentExamples = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Using custom Date and Time formatters'
+      description='A date time component can use custom date and time formatting functions.'
+      examplePath='addons/Datetime/Content/DatetimeExampleFormatters'
+    />
+    <ComponentExample
+      title='Time only with forced 24H format'
+      description='A full Time selector, where the time display is set to US locale but forced into a 24 hour clock'
+      examplePath='addons/Datetime/Content/Time24HourExample'
+    />
+  </ExampleSection>
+)
+
+export default DatetimeContentExamples

docs/app/Examples/addons/Datetime/States/DatetimeExampleDisabled.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleDisabled = () => (
+  <Datetime time={false} placeholder='Disabled Date' disabled />
+)
+
+export default DatetimeExampleDisabled

docs/app/Examples/addons/Datetime/States/DatetimeExampleDisabledDays.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+function yesterday() {
+  const _date = new Date()
+  _date.setDate(_date.getDate() - 1)
+  return _date
+}
+
+function tomorrow() {
+  const _date = new Date()
+  _date.setDate(_date.getDate() + 1)
+  return _date
+}
+
+const disabledDates = [
+  yesterday(),
+  new Date(),
+  tomorrow(),
+]
+const DatetimeExampleDisabledDays = () => (
+  <Datetime
+    time={false}
+    placeholder='Disabled days'
+    disabledDates={disabledDates}
+  />
+)
+
+export default DatetimeExampleDisabledDays

docs/app/Examples/addons/Datetime/States/DatetimeExampleError.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleError = () => (
+  <Datetime time={false} placeholder='Select Date' error />
+)
+
+export default DatetimeExampleError

docs/app/Examples/addons/Datetime/States/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DatetimeStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Calendar with disabled days'
+      description={[
+        'A calendar can specify a set of disabled dates.',
+        'This example has today, yesterday and tomorrow disabled.',
+      ].join(' ')}
+      examplePath='addons/Datetime/States/DatetimeExampleDisabledDays'
+    />
+    <ComponentExample
+      title='Error'
+      description='A calendar can show an error state'
+      examplePath='addons/Datetime/States/DatetimeExampleError'
+    />
+    <ComponentExample
+      title='Disabled'
+      description='A calendar can be disabled'
+      examplePath='addons/Datetime/States/DatetimeExampleDisabled'
+    />
+  </ExampleSection>
+)
+
+export default DatetimeStatesExamples

docs/app/Examples/addons/Datetime/Types/DateRangeExample.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DateRangeExample = () => <Datetime />
+
+// TODO
+// const DateRangeExample = () => (
+//   <Datetime.Range
+//     defaultValue={[]}
+//     dateHandler='native'
+//     name='date_range'
+//     defaultValue={[new Date('2017-02-28'), new Date('2017-03-10')]}
+//     onDateChange={(e, {rangeId, name, value}) => {
+//       console.log("Date selected: ", name, rangeId, value)
+//     }}
+//   />
+// )
+
+export default DateRangeExample

docs/app/Examples/addons/Datetime/Types/DatetimeExampleDateOnly.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleDateOnly = () => (
+  <Datetime time={false} placeholder='Select Date' />
+)
+
+export default DatetimeExampleDateOnly

docs/app/Examples/addons/Datetime/Types/DatetimeExampleFirstWeekDay.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleStartSunday = () => (
+  <div className='ui two column grid'>
+    <div className='column'>
+      <Datetime time={false} placeholder='Week starts Sunday' firstDayOfWeek={0} />
+    </div>
+    <div className='column'>
+      <Datetime time={false} placeholder='Week starts Monday' />
+    </div>
+  </div>
+)
+
+export default DatetimeExampleStartSunday

docs/app/Examples/addons/Datetime/Types/DatetimeExampleFull.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleFull = () => <Datetime time />
+
+export default DatetimeExampleFull

docs/app/Examples/addons/Datetime/Types/TimeExampleFull.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const TimeExampleFull = () => (
+  <Datetime time date={false} />
+)
+
+export default TimeExampleFull

docs/app/Examples/addons/Datetime/Types/index.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DatetimeTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Date'
+      description='A date only Date selector'
+      examplePath='addons/Datetime/Types/DatetimeExampleDateOnly'
+    />
+    <ComponentExample
+      title='First Day Of Week'
+      description='Set the first day of the week to either Monday or Sunday'
+      examplePath='addons/Datetime/Types/DatetimeExampleFirstWeekDay'
+    />
+    <ComponentExample
+      title='Time'
+      description='A full Time selector, with initial value of the current time'
+      examplePath='addons/Datetime/Types/TimeExampleFull'
+    />
+    <ComponentExample
+      title='Date and Time'
+      description='A full Date and Time selector, with initial value of the current date and time'
+      examplePath='addons/Datetime/Types/DatetimeExampleFull'
+    />
+    <ComponentExample
+      title='Range'
+      description='A date range selector'
+      examplePath='addons/Datetime/Types/DateRangeExample'
+    />
+  </ExampleSection>
+)
+
+export default DatetimeTypesExamples

docs/app/Examples/addons/Datetime/Usage/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DatetimeUsageExamples = () => (
+  <ExampleSection title='Usage' />
+)
+
+export default DatetimeUsageExamples

docs/app/Examples/addons/Datetime/Variations/index.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ContributionPrompt from 'docs/app/Components/ComponentDoc/ContributionPrompt'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DatetimeVariationsExamples = () => (
+  <ExampleSection title='Variations' />
+)
+
+export default DatetimeVariationsExamples

docs/app/Examples/addons/Datetime/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import Content from './Content'
+import States from './States'
+import Types from './Types'
+import Usage from './Usage'
+import Variations from './Variations'
+
+const DatetimeExamples = () => (
+  <div>
+    <Types />
+    <States />
+    <Content />
+  </div>
+)
+
+export default DatetimeExamples

gulp/plugins/gulp-react-docgen.js

@@ -40,7 +40,7 @@ export default (filename) => {
       // replace prop `description` strings with a parsed doc block object and updated `type`
       _.each(parsed.props, (propDef, propName) => {
         const { description, tags } = parseDocBlock(propDef.description)
-        const { name, value } = parseType(propName, propDef)
+        const { name, value } = parseType(propName, propDef) || {}
 
         parsed.props[propName] = {
           ...propDef,

gulp/plugins/util/parseType.js

@@ -35,20 +35,15 @@ const parseUnion = (union) => {
   }
 }
 
-const parsers = {
-  enum: parseEnum,
-  union: parseUnion,
-}
-
 export default (propName, { type }) => {
   if (type === undefined) {
     throw new Error([
       `The prop "${propName}" does not contain propType definition. This happens if the property is in the `,
       'defaultProps, but it is not in the propTypes',
     ].join(' '))
   }
+  if (type.name === 'enum') return parseEnum(type)
+  if (type.name === 'union') return parseUnion(type)
 
-  const parser = parsers[type.name]
-
-  return parser ? parser(type) : type
+  return type
 }

gulp/tasks/docs.js

@@ -29,12 +29,12 @@ task('clean:docs', (cb) => {
 // ----------------------------------------
 
 task('build:docs:docgen', () => src([
-  `${config.paths.src()}/addons/**/*.js`,
+  `${config.paths.src()}/addons/**/[A-Z]*.js`,
   `${config.paths.src()}/behaviors/**/*.js`,
-  `${config.paths.src()}/elements/**/*.js`,
-  `${config.paths.src()}/collections/**/*.js`,
-  `${config.paths.src()}/modules/**/*.js`,
-  `${config.paths.src()}/views/**/*.js`,
+  `${config.paths.src()}/elements/**/[A-Z]*.js`,
+  `${config.paths.src()}/collections/**/[A-Z]*.js`,
+  `${config.paths.src()}/modules/**/[A-Z]*.js`,
+  `${config.paths.src()}/views/**/[A-Z]*.js`,
   '!**/index.js',
 ])
   // do not remove the function keyword

karma.conf.babel.js

@@ -10,7 +10,7 @@ process.env.CHROME_BIN = revisionInfo.executablePath
 
 const formatError = (msg) => {
   // filter out empty lines and node_modules
-  if (!msg.trim() || /~/.test(msg)) return ''
+  if (!msg.trim() || /(~|node_modules)/.test(msg)) return ''
 
   // indent the error beneath the it() message
   let newLine = `  ${msg}`